<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '农商管理',
  },
}
</route>
<template>
  <div>
<!--    <AdHeader-->
<!--      adType="text"-->
<!--      :getSuccess="success"-->
<!--      @success="onSuccess"-->
<!--      :time-count="advInfo.read_time || 30"-->
<!--    />-->
    <div class="as-header flex justify-between items-center px-4 text-[14px] text-[#fff] bg-[#000]">
      <div class="left">
        <span>广告</span>
        <image src="@/static/images/arrow-bottom.png" mode="widthFix" class="w-[12px] ml-2"></image>
      </div>
      <div v-if="isOver" class="right" @click="handleSuccess">
        领取成功
        <image class="close w-[10px]" src="@/static/images/close.png" mode="widthFix"></image>
      </div>
      <div v-else class="right">
        <span>{{ count }}</span>
        S后领取奖励
      </div>
    </div>
    <!-- 图文区域 -->
    <div class="text-area" v-html="advInfo.content"></div>
    <!-- 提醒继续观看 -->
    <NsOverlay
      v-model:visible="visible"
      v-if="visible"
      height="618rpx"
      footerTop="70rpx"
      okText="确定"
      cancelText="放弃奖励"
      @ok="onOk"
      @cancel="onCancel"
    >
      <div class="text-center tip-text" style="padding-top: 156rpx; line-height: 48rpx">
        <div class="mt-5 text-[#666]">
          暂未获得奖励
          <br />
          是否继续观看视频
        </div>
      </div>
    </NsOverlay>
    <!-- 确认成功 -->
    <NsOverlay
      v-model:visible="successVisible"
      v-if="successVisible"
      height="618rpx"
      footerTop="70rpx"
      okText="确定"
      :showCancel="false"
      @ok="onSuccess"
    >
      <div class="text-center tip-text" style="padding-top: 68rpx; line-height: 48rpx">
        <image src="@/static/images/check-success.png" mode="widthFix" class="w-[50px]"></image>
        <div class="mt-5 text-[#666]">
          恭喜您 成功获得
          <br />
          <span class="text-[#56B756]">￥{{ amount }}</span>
          优惠券
        </div>
      </div>
    </NsOverlay>
  </div>
  <page-container
    :show="isShow"
    :duration="false"
    :overlay="false"
    @beforeleave="beforeleave"
  ></page-container>
</template>

<script setup lang="ts">
import AdHeader from '@/components/ad-header.vue'
import NsOverlay from '@/components/ns-overlay.vue'
import { useStorage } from '@/utils/storage'
import { getAdCoupon } from '@/service/advertise'
import { useToast } from 'wot-design-uni'
const { get } = useStorage()
const toast = useToast()
const successVisible = ref(false)
// 达到获得奖励的条件
const success = ref(false)
const onSuccess = async () => {
  isShow.value = false
  successVisible.value = false
  setTimeout(() => {
    uni.navigateBack({
      delta: 2,
    })
  }, 1000)
  // if (!success.value) return
  // const res: IResData<any> = await getAdCoupon(advInfo.value.adv_id)
  // if (res.code === 1) {
  //   // visible.value = false
  //   successVisible.value = true
  // } else {
  //   toast.show(res.msg)
  // }
}

const visible = ref(false)

onShow(() => {
  console.log(1)
  // if (uni.getStorageSync('isContinue')) {
  //   visible.value = true
  //   uni.removeStorageSync('isContinue')
  // }
})

// 监听页面退出
onUnload(() => {
  if (!success.value) {
    visible.value = true
    // uni.setStorageSync('isContinue', 'true')
    // uni.navigateBack()
  }
})
const onCancel = () => {
  uni.navigateBack({
    delta: 2,
  })
}
const onOk = () => {
  isShow.value = true
  visible.value = false
  timer.value = setInterval(() => {
    count.value -= 1
    if (count.value === 1) {
      timer.value && clearInterval(timer.value)
      timerBack.value = setTimeout(async () => {
        // successVisible.value = props.getSuccess
        await handleSuccess()
        isOver.value = true
      }, 1000)
    }
  }, 1000)
}
const isShow = ref(true)
const beforeleave = (e) => {
  console.log(e, 'beforeleave')
  isShow.value = false
  if (count.value > 1) {
    visible.value = true
    clearInterval(timer.value)
    timer.value = null
  }
  e.preventDefault()
}
const open = ref(true)
// 打开/关闭声音
function switchVoice(isVoice: boolean) {
  open.value = isVoice
}
watch(
  successVisible,
  (val) => {
    console.log(val, 'successVisible')
  },
  { immediate: true },
)
// 倒计时结束
const isOver = ref(false)
const amount = ref(0)
async function handleSuccess() {
  const res: IResData<any> = await getAdCoupon(advInfo.value.adv_id)
  console.log(res, '广告奖励')
  if (res.code === 1) {
    // visible.value = false
    amount.value = res.data || 0
    successVisible.value = true
  } else {
    console.log(successVisible.value, 'successVisible.value')
    isShow.value = false
    successVisible.value = false
    toast.show(res.msg)
    setTimeout(() => {
      uni.navigateBack({
        delta: 2,
      })
    }, 1000)
  }
}
const timer = ref()
const timerBack = ref()
const count = ref(30)

// const onOk = () => {
//   uni.navigateBack({
//     delta: 2,
//   })
// }
onMounted(() => {
  // 开始倒计时
  timer.value = setInterval(() => {
    count.value -= 1
    if (count.value === 1) {
      timer.value && clearInterval(timer.value)
      timerBack.value = setTimeout(async () => {
        // successVisible.value = props.getSuccess
        await handleSuccess()
        isOver.value = true
      }, 1000)
    }
  }, 1000)
})
const advInfo = ref<IAdvData>({})
onLoad(() => {
  advInfo.value = get('advInfo')
  if (advInfo.value.is_read_all === 0) {
    success.value = true
  } else {
    success.value = false
  }
  if (advInfo.value.read_time) {
    // count.value = advInfo.value.read_time
    const [minutes, second] = advInfo.value.read_time.split(':')
    console.log(minutes, second, '1231232')
    count.value = Number(minutes) * 60 + Number(second)
  }
})
</script>
<style scoped>
.text-area {
  padding-top: 96rpx;
  width: 750rpx;
  box-sizing: border-box;
}
.as-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 750rpx;
  height: 96rpx;
  box-sizing: border-box;
}

.as-header .right {
  padding: 8rpx 20rpx;
  border-radius: 122px;
  box-sizing: border-box;
  border: 1px solid #ffffff;
}

.close {
  vertical-align: initial;
}
</style>
